import {Component} from 'react'
import {  logoUrl, initData, getMbiTypeName, defultImg }  from '../../utils'
import {StoreState} from './type';
import styles from './SearchBar.module.scss';


type IProps = StoreState & {
  goDetailed: (ISearchObj) => void
}
class SearchResult extends Component<IProps>{
  constructor(props) {
    super(props)
  }
  render() {
    let {searchData, mbiType} = this.props;
    return (
      <div className={styles["search-res-box"]}>
        {
          searchData.length > 0 && searchData.map((item, index) => {
            return (
              <div 
                className={styles["brand-box"]}  
                onClick={() => {this.props.goDetailed(item)}} 
                key={`index-top-search-${index}`}
              >
                <img src = {  defultImg(logoUrl + item.logoUrl, item.theIndex === '1102' ? 'mci' : 
                   'mbi')
                  }
                  alt={item.name} 
                />
                <div className={styles["name-type"]}>
                  <p className={styles["name"]}>{item.name}</p>
                  {item.theIndex !== '1102' && <p className={styles["typeN"]}>{getMbiTypeName(mbiType, item.monitorCategoryId)}</p>} 
                </div>
              </div>
            )
          })
        }
      </div>
    )
  }
}


export default SearchResult;